<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        .my-btn{
            cursor: pointer;
            border-radius: 100000px;
            float: right;
            line-height: 1.6;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col">
                <div class="card bg-light my-3">
                    <div class="card-body ">
                        <div class="mb-3">
                            <label for="email" class="form-label">添加新邮箱</label>
                            <input type="email" class="form-control" id="email" placeholder="请输入邮箱" 
                                :class=" emailVail "
                                v-model="email"
                            >
                            <!-- <div class="valid-feedback">Looks good!</div> -->
                            <div class="invalid-feedback">邮箱不合法</div>
                        </div>
                        <div class="d-grid gap-2">
                            <input class="btn btn-info" type="button" value="添加" :disabled="isDisd" @click="addItem()">
                        </div>
                    </div>
                </div>
                <div class="card bg-light">
                    <div class="card-body">
                        <ul class="list-group">
                            <li class="list-group-item" style="text-align:center;"
                                v-if="emails.length<=0"
                            >请先添加邮箱</li>
                            <li class="list-group-item" v-for="(e, index) in emails" :key="index">
                                <span>{{ e }}</span>
                                <span class="badge bg-primary my-btn" @click="removeItem(index)">删除</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                email:"",
                emails:[]
            },
            computed:{
                emailVail(){
                    if(this.email==""){
                        return "";
                    }else{
                        return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)?'is-valid':'is-invalid'
                    }
                },
                isDisd(){
                    return !(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email))
                }
            },
            methods:{
                addItem(){
                    this.emails.push(this.email)
                    this.email = "";
                },
                removeItem(i){
                    // vue 的 数组 splice 方法是vue提供的特殊的 变更（变异） 方法
                    // vue对数组中会修改原数组的方法进行了重新定义，在保留方法本身功能的情况下，增加了响应触发函数
                    this.emails.splice(i,1)
                }
            }
        })
    </script>
</body>

</html>